<template>
    <div class="padding20">
        <!--条件查询-->
        <div class="mContainer">
            <el-input placeholder="ID" v-model="queryParam.id" @keyup.enter.native="selectPage"
                      class="mItem w150" clearable/>
            <el-tooltip content="查询" class="item" effect="dark" placement="top-start">
                <el-button @click="selectPage" class="mItem  let10"
                           type="primary" icon="el-icon-search"
                />
            </el-tooltip>
            <el-button class="mItem let10" type="primary" icon="el-icon-edit"
                       @click="$K.to('/system/user/insert')">新增
            </el-button>
        </div>

        <!--表格数据-->
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%;"
                  @selection-change="selectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column label="ID" width="100" prop="id"/>
            <el-table-column label="昵称" width="150" prop="name"/>
            <el-table-column label="账号" width="150" prop="account"/>
            <el-table-column label="排名" width="100" prop="states">
                <template slot-scope="scope">
                    <span>{{ scope.row.states| userStates }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" width="150" prop="phone"/>
            <el-table-column label="注册时间" width="170" prop="createTime"/>
            <el-table-column label="最后登录时间" width="170" prop="loginTime"/>
            <el-table-column label="最后登录IP" width="170" prop="loginIp"/>
            <el-table-column label="操作" min-width="250" align="center">
                <template slot-scope="scope">
                    <el-button type="info" plain size="mini"
                               @click="$K.to('/system/user/insert',{index:scope.$index,id:scope.row.id})">
                        详情
                    </el-button>
                    <el-button type="success" plain size="mini"
                               @click="$K.to('/system/user/edit',{index:scope.$index,id:scope.row.id})">
                        编辑
                    </el-button>
                    <el-button
                            type="primary" plain
                            size="mini"
                            @click="showRestPassword(scope.$index, scope.row)">重置密码
                    </el-button>
                    <!--                    <el-button-->
                    <!--                            type="danger" plain-->
                    <!--                            size="mini"-->
                    <!--                            @click="showDelete(scope.$index, scope.row)">删除-->
                    <!--                    </el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--分页插件-->
        <Pagination @pagination="selectPage"
                    v-show="queryParam.pages>0"
                    :total-data-num="queryParam.total"
                    :current-page="queryParam.current"
                    :page-size="queryParam.size"/>

    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import Pagination from "@/components/Pagination/Pagination.vue";
    import {API} from "@/aconst/API";
    import BaseVue from "@/utils/BaseVue";

    @Component({
        name: 'UserList',
        components: {
            Pagination
        },
    })
    export default class UserList extends BaseVue {
        mFormData: any = {};

        //初始化
        mounted() {
            this.selectPage(null);
        }

        //查询分页
        selectPage(pageUpdate: any) {
            this.queryParam.pageApi = API.sysUserPage;
            this.basePage(pageUpdate);
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //监听复选框事件
        selectionChange(val: any) {
            this.baseSelectionChange(val);
        }
    }

</script>

<style scoped>

</style>
